<!--
 * @Author: lwHao
 * @Date: 2020-11-06 14:38:50
 * @LastEditors: lwHao
 * @LastEditTime: 2020-11-06 19:10:04
-->
<template>
  <Layout>
    <el-card shadow="never" style="min-height: 400px;margin-bottom: 20px;padding: 0px 0px 20px 0px">
      <div>
        <div v-if="$page.allUsers.edges.length">
          <el-row style="min-height: 200px; ">
            <el-col :span="8" v-for="({node:item},index) in $page.allUsers.edges" :key="'followers'+index" style="padding: 10px">
              <el-card shadow="hover" style="font-size: 13px;color: #606266;line-height: 20px">
                <i class="el-icon-star-off"></i>{{item.name}}
                <!-- <a @click="$router.push(`/user/social/details/${item.name}`)" style=" text-decoration:none;cursor:pointer">{{item.name}}</a> -->
                <br />
                <i class="el-icon-message"></i>&emsp;
                <a :href="item.website" target="_blank" style=" text-decoration:none;cursor:pointer">TA的主页</a>
                <br />
                <g-image alt="Example image" src="~/favicon.png" style="width: 100%;border-radius:5px;margin-top: 5px" />
                <!-- <img :src="item.avatarUrl" style="width: 100%;border-radius:5px;margin-top: 5px" /> -->
              </el-card>
            </el-col>
          </el-row>
          <div style="text-align: center;margin-top: 10px">
            <el-pagination @current-change="onSelect" background layout="prev, pager, next" :current-page.sync="$page.allUsers.pageInfo.currentPage" :page-size="9" :total="$page.allUsers.pageInfo.totalItems"></el-pagination>
          </div>
        </div>
        <!-- <div style="min-height: 300px;margin-bottom: 20px;padding: 20px 0px 20px 0px;text-align: center" v-else>
          <font style="font-size: 30px;color:#dddddd ">
            <b>(￢_￢) 没有一个粉丝</b>
          </font>
        </div>-->
      </div>
    </el-card>
  </Layout>
</template>

<page-query>
query ($page: Int) {
  allUsers(page:$page,perPage:9) @paginate {
    edges{
      node{
        id
        name
        email
        address{
          street
          suite
          city
          zipcode
          geo{
            lat
            lng
          }
        }
        phone
        website
        company{
          name
          catchPhrase
          bs
        }
      }
    }
    pageInfo {
      totalPages
      currentPage
      totalItems
    }
  }
}
</page-query>

<script>
import { Pager } from 'gridsome'
export default {
  name: 'Social',
  components: { Pager },
  metaInfo: {
    title: '社交圈'
  },
  methods: {
    onSelect(page) {
      this.$router.push('/social'+ (page===1? '' : `/${page}`))
    }
  }
}
</script>